క్రిటికల్ రెండరింగ్ పాత్‌ను విశ్లేషించి, ఆప్టిమైజ్ చేయడం ద్వారా వెబ్ పనితీరులో నైపుణ్యం సాధించండి. జావాస్క్రిప్ట్ రెండరింగ్‌ను ఎలా ప్రభావితం చేస్తుందో మరియు దాన్ని ఎలా సరిచేయాలో డెవలపర్‌ల కోసం ఒక సమగ్ర మార్గదర్శి.
జావాస్క్రిప్ట్ పనితీరు ఆప్టిమైజేషన్: క్రిటికల్ రెండరింగ్ పాత్ పై ఒక లోతైన విశ్లేషణ
వెబ్ డెవలప్‌మెంట్ ప్రపంచంలో, వేగం కేవలం ఒక ఫీచర్ మాత్రమే కాదు; అది మంచి యూజర్ అనుభవానికి పునాది. నెమ్మదిగా లోడ్ అయ్యే వెబ్‌సైట్ అధిక బౌన్స్ రేట్లు, తక్కువ మార్పిడులు, మరియు నిరాశ చెందిన ప్రేక్షకులకు దారితీస్తుంది. వెబ్ పనితీరుకు అనేక అంశాలు దోహదం చేసినప్పటికీ, అత్యంత ప్రాథమికమైన మరియు తరచుగా తప్పుగా అర్థం చేసుకునే భావనలలో ఒకటి క్రిటికల్ రెండరింగ్ పాత్ (CRP). బ్రౌజర్‌లు కంటెంట్‌ను ఎలా రెండర్ చేస్తాయో మరియు, మరింత ముఖ్యంగా, జావాస్క్రిప్ట్ ఈ ప్రక్రియతో ఎలా సంకర్షణ చెందుతుందో అర్థం చేసుకోవడం పనితీరు పట్ల తీవ్రంగా ఉన్న ఏ డెవలపర్‌కైనా చాలా ముఖ్యం.
ఈ సమగ్ర మార్గదర్శి మిమ్మల్ని క్రిటికల్ రెండరింగ్ పాత్ లోకి లోతుగా తీసుకువెళ్తుంది, ప్రత్యేకంగా జావాస్క్రిప్ట్ పాత్రపై దృష్టి సారిస్తుంది. మేము దానిని ఎలా విశ్లేషించాలో, అడ్డంకులను ఎలా గుర్తించాలో, మరియు మీ వెబ్ అప్లికేషన్‌లను ప్రపంచవ్యాప్త వినియోగదారుల కోసం వేగంగా మరియు మరింత ప్రతిస్పందించేలా చేసే శక్తివంతమైన ఆప్టిమైజేషన్ టెక్నిక్‌లను ఎలా వర్తింపజేయాలో అన్వేషిస్తాము.
క్రిటికల్ రెండరింగ్ పాత్ అంటే ఏమిటి?
క్రిటికల్ రెండరింగ్ పాత్ అనేది HTML, CSS, మరియు జావాస్క్రిప్ట్‌లను స్క్రీన్‌పై కనిపించే పిక్సెల్‌లుగా మార్చడానికి బ్రౌజర్ తీసుకోవలసిన దశల క్రమం. CRP ఆప్టిమైజేషన్ యొక్క ప్రాథమిక లక్ష్యం ప్రారంభ, "అబవ్-ద-ఫోల్డ్" కంటెంట్‌ను వినియోగదారునికి వీలైనంత త్వరగా రెండర్ చేయడం. ఇది ఎంత వేగంగా జరిగితే, యూజర్ పేజీ లోడ్ అవుతున్నట్లు అంత వేగంగా గ్రహిస్తారు.
ఈ పాత్‌లో అనేక కీలక దశలు ఉంటాయి:
- DOM నిర్మాణం: సర్వర్ నుండి HTML డాక్యుమెంట్ యొక్క మొదటి బైట్‌లను బ్రౌజర్ స్వీకరించినప్పుడు ఈ ప్రక్రియ ప్రారంభమవుతుంది. ఇది HTML మార్కప్‌ను అక్షరం అక్షరం పార్స్ చేయడం మొదలుపెట్టి, డాక్యుమెంట్ ఆబ్జెక్ట్ మోడల్ (DOM)ను నిర్మిస్తుంది. DOM అనేది HTML డాక్యుమెంట్‌లోని అన్ని నోడ్‌లను (ఎలిమెంట్‌లు, అట్రిబ్యూట్‌లు, టెక్స్ట్) సూచించే ఒక చెట్టు వంటి నిర్మాణం.
- CSSOM నిర్మాణం: బ్రౌజర్ DOMను నిర్మిస్తున్నప్పుడు, అది ఒక CSS స్టైల్‌షీట్‌ను (
<link>ట్యాగ్‌లో గానీ లేదా ఇన్‌లైన్<style>బ్లాక్‌లో గానీ) ఎదుర్కొంటే, అది CSS ఆబ్జెక్ట్ మోడల్ (CSSOM)ను నిర్మించడం ప్రారంభిస్తుంది. DOM లాగానే, CSSOM అనేది పేజీకి సంబంధించిన అన్ని స్టైల్స్ మరియు వాటి సంబంధాలను కలిగి ఉన్న ఒక చెట్టు నిర్మాణం. HTML లాగా కాకుండా, CSS డిఫాల్ట్‌గా రెండర్-బ్లాకింగ్. బ్రౌజర్ అన్ని CSSలను డౌన్‌లోడ్ చేసి, పార్స్ చేసే వరకు పేజీలోని ఏ భాగాన్ని రెండర్ చేయలేదు, ఎందుకంటే తర్వాతి స్టైల్స్ మునుపటి వాటిని ఓవర్‌రైడ్ చేయవచ్చు. - రెండర్ ట్రీ నిర్మాణం: DOM మరియు CSSOM రెండూ సిద్ధమైన తర్వాత, బ్రౌజర్ వాటిని కలిపి రెండర్ ట్రీని సృష్టిస్తుంది. ఈ ట్రీలో పేజీని రెండర్ చేయడానికి అవసరమైన నోడ్‌లు మాత్రమే ఉంటాయి. ఉదాహరణకు,
display: none;ఉన్న ఎలిమెంట్‌లు మరియు<head>ట్యాగ్ రెండర్ ట్రీలో చేర్చబడవు ఎందుకంటే అవి దృశ్యమానంగా రెండర్ చేయబడవు. రెండర్ ట్రీ ఏమి ప్రదర్శించాలో తెలుసు, కానీ ఎక్కడ లేదా ఎంత పెద్దదో కాదు. - లేఅవుట్ (లేదా రీఫ్లో): రెండర్ ట్రీ నిర్మించబడిన తర్వాత, బ్రౌజర్ లేఅవుట్ దశకు వెళుతుంది. ఈ దశలో, ఇది వ్యూపోర్ట్‌కు సంబంధించి రెండర్ ట్రీలోని ప్రతి నోడ్ యొక్క ఖచ్చితమైన పరిమాణం మరియు స్థానాన్ని గణిస్తుంది. ఈ దశ యొక్క అవుట్‌పుట్ పేజీలోని ప్రతి ఎలిమెంట్ యొక్క ఖచ్చితమైన జ్యామితిని సంగ్రహించే ఒక "బాక్స్ మోడల్".
- పెయింట్: చివరగా, బ్రౌజర్ లేఅవుట్ సమాచారాన్ని తీసుకుని, స్క్రీన్‌పై ప్రతి నోడ్ కోసం పిక్సెల్‌లను "పెయింట్" చేస్తుంది. ఇందులో టెక్స్ట్, రంగులు, చిత్రాలు, సరిహద్దులు మరియు నీడలను గీయడం ఉంటుంది—అంటే పేజీలోని ప్రతి దృశ్య భాగాన్ని రాస్టరైజ్ చేయడం. సామర్థ్యాన్ని మెరుగుపరచడానికి ఈ ప్రక్రియ బహుళ లేయర్లలో జరగవచ్చు.
- కంపోజిట్: పేజీ కంటెంట్ బహుళ లేయర్లపై పెయింట్ చేయబడితే, తుది చిత్రాన్ని స్క్రీన్‌పై ప్రదర్శించడానికి బ్రౌజర్ ఈ లేయర్లను సరైన క్రమంలో కంపోజిట్ చేయాలి. ఈ దశ ముఖ్యంగా యానిమేషన్‌లు మరియు స్క్రోలింగ్ కోసం ముఖ్యమైనది, ఎందుకంటే కంపోజిటింగ్ సాధారణంగా లేఅవుట్ మరియు పెయింట్ దశలను మళ్లీ అమలు చేయడం కంటే తక్కువ గణన ఖర్చుతో కూడుకున్నది.
క్రిటికల్ రెండరింగ్ పాత్‌లో జావాస్క్రిప్ట్ యొక్క అంతరాయకర పాత్ర
అయితే ఈ చిత్రంలో జావాస్క్రిప్ట్ ఎక్కడ సరిపోతుంది? జావాస్క్రిప్ట్ ఒక శక్తివంతమైన భాష, ఇది DOM మరియు CSSOM రెండింటినీ మార్చగలదు. అయితే, ఈ శక్తికి ఒక వెల ఉంటుంది. జావాస్క్రిప్ట్ క్రిటికల్ రెండరింగ్ పాత్‌ను బ్లాక్ చేయగలదు, మరియు తరచుగా చేస్తుంది, ఇది రెండరింగ్‌లో గణనీయమైన ఆలస్యానికి దారితీస్తుంది.
పార్సర్-బ్లాకింగ్ జావాస్క్రిప్ట్
డిఫాల్ట్‌గా, జావాస్క్రిప్ట్ పార్సర్-బ్లాకింగ్. బ్రౌజర్ యొక్క HTML పార్సర్ ఒక <script> ట్యాగ్‌ను ఎదుర్కొన్నప్పుడు, అది DOMను నిర్మించే ప్రక్రియను ఆపాలి. అప్పుడు అది జావాస్క్రిప్ట్ ఫైల్‌ను డౌన్‌లోడ్ (బాహ్యంగా ఉంటే), పార్స్, మరియు ఎక్జిక్యూట్ చేయడానికి వెళుతుంది. ఈ ప్రక్రియ బ్లాకింగ్ ఎందుకంటే స్క్రిప్ట్ document.write() వంటిది చేయవచ్చు, ఇది మొత్తం DOM నిర్మాణాన్ని మార్చగలదు. స్క్రిప్ట్ పూర్తయ్యే వరకు బ్రౌజర్ వేచి ఉండటమే తప్ప HTML పార్సింగ్‌ను సురక్షితంగా పునఃప్రారంభించడానికి వేరే మార్గం లేదు.
ఈ స్క్రిప్ట్ మీ డాక్యుమెంట్ యొక్క <head>లో ఉన్నట్లయితే, అది ప్రారంభంలోనే DOM నిర్మాణాన్ని బ్లాక్ చేస్తుంది. దీని అర్థం బ్రౌజర్‌కు రెండర్ చేయడానికి కంటెంట్ ఏమీ ఉండదు, మరియు స్క్రిప్ట్ పూర్తిగా ప్రాసెస్ అయ్యే వరకు యూజర్ ఖాళీ తెల్ల స్క్రీన్‌ను చూస్తూ ఉంటారు. ఇది పేలవమైన పనితీరుకు ఒక ప్రాథమిక కారణం.
DOM మరియు CSSOM మానిప్యులేషన్
జావాస్క్రిప్ట్ CSSOMను కూడా క్వెరీ చేసి, మార్చగలదు. ఉదాహరణకు, మీ స్క్రిప్ట్ element.style.width వంటి కంప్యూటెడ్ స్టైల్‌ను అడిగితే, సరైన సమాధానం ఇవ్వడానికి బ్రౌజర్ ముందుగా అన్ని CSSలు డౌన్‌లోడ్ చేయబడి, పార్స్ చేయబడ్డాయని నిర్ధారించుకోవాలి. ఇది మీ జావాస్క్రిప్ట్ మరియు మీ CSS మధ్య ఒక డిపెండెన్సీని సృష్టిస్తుంది, ఇక్కడ CSSOM సిద్ధమయ్యే వరకు స్క్రిప్ట్ ఎగ్జిక్యూషన్ బ్లాక్ చేయబడవచ్చు.
అంతేకాకుండా, జావాస్క్రిప్ట్ DOMను (ఉదా., ఒక ఎలిమెంట్‌ను జోడించడం లేదా తీసివేయడం) లేదా CSSOMను (ఉదా., ఒక క్లాస్‌ను మార్చడం) సవరిస్తే, అది బ్రౌజర్ పని యొక్క క్యాస్కేడ్‌ను ప్రేరేపించగలదు. ఒక మార్పు బ్రౌజర్‌ను లేఅవుట్‌ను (ఒక రీఫ్లో) పునఃలెక్కించి, ఆపై స్క్రీన్ యొక్క ప్రభావిత భాగాలను లేదా మొత్తం పేజీని తిరిగి పెయింట్ చేయమని బలవంతం చేయవచ్చు. తరచుగా లేదా తప్పు సమయంలో జరిగే మానిప్యులేషన్‌లు నెమ్మదైన, ప్రతిస్పందించని యూజర్ ఇంటర్‌ఫేస్‌కు దారితీయవచ్చు.
క్రిటికల్ రెండరింగ్ పాత్‌ను ఎలా విశ్లేషించాలి
మీరు ఆప్టిమైజ్ చేయడానికి ముందు, మొదట కొలవాలి. CRPని విశ్లేషించడానికి బ్రౌజర్ డెవలపర్ టూల్స్ మీ ఉత్తమ స్నేహితులు. ఈ ప్రయోజనం కోసం శక్తివంతమైన టూల్స్ సూట్‌ను అందించే Chrome DevToolsపై దృష్టి పెడదాం.
పనితీరు (Performance) ట్యాబ్‌ను ఉపయోగించడం
పనితీరు ట్యాబ్ మీ పేజీని రెండర్ చేయడానికి బ్రౌజర్ చేసే ప్రతిదాని యొక్క వివరణాత్మక టైమ్‌లైన్‌ను అందిస్తుంది.
- Chrome DevTools తెరవండి (Ctrl+Shift+I లేదా Cmd+Option+I).
- Performance ట్యాబ్‌కు వెళ్లండి.
- టైమ్‌లైన్‌పై కీలక మెట్రిక్‌లను చూడటానికి "Web Vitals" చెక్‌బాక్స్ టిక్ చేయబడిందని నిర్ధారించుకోండి.
- పేజీ లోడ్ ప్రొఫైలింగ్ ప్రారంభించడానికి రీలోడ్ బటన్‌ను క్లిక్ చేయండి (లేదా Ctrl+Shift+E / Cmd+Shift+E నొక్కండి).
పేజీ లోడ్ అయిన తర్వాత, మీకు ఒక ఫ్లేమ్ చార్ట్ ప్రదర్శించబడుతుంది. Main థ్రెడ్ విభాగంలో ఏమి చూడాలో ఇక్కడ ఉంది:
- లాంగ్ టాస్క్‌లు: 50 మిల్లీసెకన్ల కంటే ఎక్కువ సమయం తీసుకునే ఏ టాస్క్ అయినా ఎర్ర త్రిభుజంతో గుర్తించబడుతుంది. ఇవి ప్రధాన థ్రెడ్‌ను బ్లాక్ చేస్తాయి మరియు UIని ప్రతిస్పందించనివిగా చేస్తాయి కాబట్టి ఆప్టిమైజేషన్ కోసం ప్రధాన అభ్యర్థులు.
- పార్స్ HTML (నీలం): ఇది మీ HTMLను బ్రౌజర్ ఎక్కడ పార్స్ చేస్తుందో చూపిస్తుంది. మీరు పెద్ద ఖాళీలు లేదా అంతరాయాలు చూస్తే, అది ఒక బ్లాకింగ్ స్క్రిప్ట్ కారణంగా కావచ్చు.
- ఎవాల్యుయేట్ స్క్రిప్ట్ (పసుపు): ఇక్కడ జావాస్క్రిప్ట్ ఎక్జిక్యూట్ చేయబడుతోంది. ముఖ్యంగా పేజీ లోడ్ ప్రారంభంలో పొడవైన పసుపు బ్లాక్‌ల కోసం చూడండి. ఇవి మీ బ్లాకింగ్ స్క్రిప్ట్‌లు.
- రీక్యాలిక్యులేట్ స్టైల్ (ఊదా): ఇది CSSOM నిర్మాణం మరియు స్టైల్ గణనలను సూచిస్తుంది.
- లేఅవుట్ (ఊదా): ఈ బ్లాక్‌లు లేఅవుట్ లేదా రీఫ్లో దశను సూచిస్తాయి. మీరు వీటిని చాలా చూస్తే, మీ జావాస్క్రిప్ట్ పదేపదే జ్యామితీయ లక్షణాలను చదవడం మరియు వ్రాయడం ద్వారా "లేఅవుట్ థ్రాషింగ్"కు కారణం కావచ్చు.
- పెయింట్ (ఆకుపచ్చ): ఇది పెయింటింగ్ ప్రక్రియ.
నెట్‌వర్క్ (Network) ట్యాబ్‌ను ఉపయోగించడం
రిసోర్స్ డౌన్‌లోడ్‌ల క్రమం మరియు వ్యవధిని అర్థం చేసుకోవడానికి నెట్‌వర్క్ ట్యాబ్ యొక్క వాటర్‌ఫాల్ చార్ట్ అమూల్యమైనది.
- DevTools తెరిచి Network ట్యాబ్‌కు వెళ్లండి.
- పేజీని రీలోడ్ చేయండి.
- వాటర్‌ఫాల్ వ్యూ ప్రతి రిసోర్స్ (HTML, CSS, JS, చిత్రాలు) ఎప్పుడు అభ్యర్థించబడిందో మరియు డౌన్‌లోడ్ చేయబడిందో చూపిస్తుంది.
వాటర్‌ఫాల్ పైన ఉన్న అభ్యర్థనలపై చాలా శ్రద్ధ వహించండి. పేజీ రెండర్ చేయడం ప్రారంభించే ముందు డౌన్‌లోడ్ చేయబడుతున్న CSS మరియు జావాస్క్రిప్ట్ ఫైల్‌లను మీరు సులభంగా గుర్తించవచ్చు. ఇవి మీ రెండర్-బ్లాకింగ్ రిసోర్స్‌లు.
లైట్‌హౌస్ (Lighthouse) ఉపయోగించడం
లైట్‌హౌస్ అనేది Chrome DevToolsలో నిర్మించబడిన ఒక ఆటోమేటెడ్ ఆడిటింగ్ టూల్ (Lighthouse ట్యాబ్ కింద). ఇది ఉన్నత-స్థాయి పనితీరు స్కోరు మరియు ఆచరణాత్మక సిఫార్సులను అందిస్తుంది.
CRP కోసం ఒక కీలక ఆడిట్ "రెండర్-బ్లాకింగ్ రిసోర్స్‌లను తొలగించండి." ఈ నివేదిక ఫస్ట్ కంటెంట్‌ఫుల్ పెయింట్ (FCP)ను ఆలస్యం చేస్తున్న CSS మరియు జావాస్క్రిప్ట్ ఫైల్‌లను స్పష్టంగా జాబితా చేస్తుంది, మీకు ఆప్టిమైజేషన్ కోసం లక్ష్యాల స్పష్టమైన జాబితాను ఇస్తుంది.
జావాస్క్రిప్ట్ కోసం ముఖ్యమైన ఆప్టిమైజేషన్ వ్యూహాలు
సమస్యలను ఎలా గుర్తించాలో ఇప్పుడు మనకు తెలుసు కాబట్టి, పరిష్కారాలను అన్వేషిద్దాం. ప్రారంభ రెండర్‌ను బ్లాక్ చేసే జావాస్క్రిప్ట్ మొత్తాన్ని తగ్గించడమే లక్ష్యం.
1. `async` మరియు `defer` యొక్క శక్తి
HTML పార్సర్‌ను జావాస్క్రిప్ట్ బ్లాక్ చేయకుండా నిరోధించడానికి సరళమైన మరియు అత్యంత ప్రభావవంతమైన మార్గం మీ <script> ట్యాగ్‌లపై `async` మరియు `defer` అట్రిబ్యూట్‌లను ఉపయోగించడం.
- ప్రామాణిక
<script>:<script src="script.js"></script>
మనం చర్చించినట్లుగా, ఇది పార్సర్-బ్లాకింగ్. HTML పార్సింగ్ ఆగిపోతుంది, స్క్రిప్ట్ డౌన్‌లోడ్ చేయబడి, ఎక్జిక్యూట్ చేయబడుతుంది, ఆపై పార్సింగ్ పునఃప్రారంభమవుతుంది. <script async>:<script src="script.js" async></script>
HTML పార్సింగ్‌తో సమాంతరంగా, స్క్రిప్ట్ అసమకాలికంగా డౌన్‌లోడ్ చేయబడుతుంది. స్క్రిప్ట్ డౌన్‌లోడ్ పూర్తయిన వెంటనే, HTML పార్సింగ్ పాజ్ చేయబడి, స్క్రిప్ట్ ఎక్జిక్యూట్ చేయబడుతుంది. ఎగ్జిక్యూషన్ క్రమం హామీ ఇవ్వబడదు; స్క్రిప్ట్‌లు అందుబాటులోకి వచ్చినప్పుడు ఎక్జిక్యూట్ చేయబడతాయి. DOM లేదా ఇతర స్క్రిప్ట్‌లపై ఆధారపడని, అనలిటిక్స్ లేదా యాడ్ స్క్రిప్ట్‌ల వంటి స్వతంత్ర, థర్డ్-పార్టీ స్క్రిప్ట్‌లకు ఇది ఉత్తమమైనది.<script defer>:<script src="script.js" defer></script>
HTML పార్సింగ్‌తో సమాంతరంగా, స్క్రిప్ట్ అసమకాలికంగా డౌన్‌లోడ్ చేయబడుతుంది. అయితే, HTML డాక్యుమెంట్ పూర్తిగా పార్స్ అయిన తర్వాత (DOMContentLoadedఈవెంట్‌కు ঠিক ముందు) మాత్రమే స్క్రిప్ట్ ఎక్జిక్యూట్ చేయబడుతుంది. `defer`తో ఉన్న స్క్రిప్ట్‌లు డాక్యుమెంట్‌లో కనిపించే క్రమంలో ఎక్జిక్యూట్ చేయబడతాయని కూడా హామీ ఇవ్వబడింది. DOMతో ఇంటరాక్ట్ అవ్వాల్సిన మరియు ప్రారంభ పెయింట్‌కు క్లిష్టమైనవి కాని చాలా స్క్రిప్ట్‌లకు ఇది ప్రాధాన్యత ఇవ్వబడిన పద్ధతి.
సాధారణ నియమం: మీ ప్రధాన అప్లికేషన్ స్క్రిప్ట్‌ల కోసం `defer` ఉపయోగించండి. స్వతంత్ర థర్డ్-పార్టీ స్క్రిప్ట్‌ల కోసం `async` ఉపయోగించండి. ప్రారంభ రెండర్‌కు ఖచ్చితంగా అవసరమైతే తప్ప <head>లో బ్లాకింగ్ స్క్రిప్ట్‌లను ఉపయోగించడం మానుకోండి.
2. కోడ్ స్ప్లిట్టింగ్
ఆధునిక వెబ్ అప్లికేషన్‌లు తరచుగా ఒకే, పెద్ద జావాస్క్రిప్ట్ ఫైల్‌లోకి బండిల్ చేయబడతాయి. ఇది HTTP అభ్యర్థనల సంఖ్యను తగ్గించినప్పటికీ, ఇది వినియోగదారుని ప్రారంభ పేజీ వీక్షణకు అవసరం లేని చాలా కోడ్‌ను డౌన్‌లోడ్ చేయమని బలవంతం చేస్తుంది.
కోడ్ స్ప్లిట్టింగ్ అనేది ఆ పెద్ద బండిల్‌ను డిమాండ్‌పై లోడ్ చేయగల చిన్న చిన్న చంక్‌లుగా విభజించే ప్రక్రియ. ఉదాహరణకు:
- ప్రారంభ చంక్: ప్రస్తుత పేజీ యొక్క కనిపించే భాగాన్ని రెండర్ చేయడానికి అవసరమైన ముఖ్యమైన జావాస్క్రిప్ట్‌ను మాత్రమే కలిగి ఉంటుంది.
- ఆన్-డిమాండ్ చంక్‌లు: ఇతర రూట్‌లు, మోడల్‌లు, లేదా బిలో-ద-ఫోల్డ్ ఫీచర్‌ల కోసం కోడ్‌ను కలిగి ఉంటాయి. యూజర్ ఆ రూట్‌కు నావిగేట్ చేసినప్పుడు లేదా ఫీచర్‌తో ఇంటరాక్ట్ అయినప్పుడు మాత్రమే ఇవి లోడ్ చేయబడతాయి.
ఆధునిక బండ్లర్‌లు అయిన Webpack, Rollup, మరియు Parcel డైనమిక్ `import()` సింటాక్స్ ఉపయోగించి కోడ్ స్ప్లిట్టింగ్‌కు అంతర్నిర్మిత మద్దతును కలిగి ఉన్నాయి. React (React.lazyతో) మరియు Vue వంటి ఫ్రేమ్‌వర్క్‌లు కూడా కాంపోనెంట్ స్థాయిలో కోడ్‌ను విభజించడానికి సులభమైన మార్గాలను అందిస్తాయి.
3. ట్రీ షేకింగ్ మరియు డెడ్ కోడ్ ఎలిమినేషన్
కోడ్ స్ప్లిట్టింగ్‌తో కూడా, మీ ప్రారంభ బండిల్‌లో వాస్తవానికి ఉపయోగించని కోడ్ ఉండవచ్చు. మీరు లైబ్రరీలను ఇంపోర్ట్ చేసి, వాటిలో కొంత భాగాన్ని మాత్రమే ఉపయోగించినప్పుడు ఇది సాధారణం.
ట్రీ షేకింగ్ అనేది మీ తుది బండిల్ నుండి ఉపయోగించని కోడ్‌ను తొలగించడానికి ఆధునిక బండ్లర్‌లు ఉపయోగించే ఒక ప్రక్రియ. ఇది మీ `import` మరియు `export` స్టేట్‌మెంట్‌లను స్టాటిక్‌గా విశ్లేషించి, ఏ కోడ్ చేరుకోలేనిదో నిర్ణయిస్తుంది. మీ వినియోగదారులకు అవసరమైన కోడ్‌ను మాత్రమే మీరు షిప్ చేస్తున్నారని నిర్ధారించుకోవడం ద్వారా, మీరు బండిల్ పరిమాణాలను గణనీయంగా తగ్గించవచ్చు, ఇది వేగవంతమైన డౌన్‌లోడ్‌లు మరియు పార్సింగ్ సమయాలకు దారితీస్తుంది.
4. మినిఫికేషన్ మరియు కంప్రెషన్
ఏదైనా ప్రొడక్షన్ వెబ్‌సైట్‌కు ఇవి ప్రాథమిక దశలు.
- మినిఫికేషన్: ఇది మీ కోడ్ నుండి అనవసరమైన అక్షరాలను—వైట్‌స్పేస్, కామెంట్‌లు, మరియు న్యూలైన్‌లు వంటివి—తొలగించి, వేరియబుల్ పేర్లను కుదించే ఒక ఆటోమేటెడ్ ప్రక్రియ, దాని ఫంక్షనాలిటీని మార్చకుండా. ఇది ఫైల్ పరిమాణాన్ని తగ్గిస్తుంది. Terser (జావాస్క్రిప్ట్ కోసం) మరియు cssnano (CSS కోసం) వంటి టూల్స్ సాధారణంగా ఉపయోగించబడతాయి.
- కంప్రెషన్: మినిఫికేషన్ తర్వాత, మీ సర్వర్ ఫైల్‌లను బ్రౌజర్‌కు పంపే ముందు వాటిని కంప్రెస్ చేయాలి. Gzip మరియు, మరింత ప్రభావవంతంగా, Brotli వంటి అల్గారిథమ్‌లు ఫైల్ పరిమాణాలను 70-80% వరకు తగ్గించగలవు. బ్రౌజర్ వాటిని స్వీకరించిన తర్వాత డీకంప్రెస్ చేస్తుంది. ఇది సర్వర్ కాన్ఫిగరేషన్, కానీ నెట్‌వర్క్ బదిలీ సమయాలను తగ్గించడానికి ఇది చాలా ముఖ్యం.
5. క్రిటికల్ జావాస్క్రిప్ట్‌ను ఇన్‌లైన్ చేయడం (జాగ్రత్తగా ఉపయోగించండి)
మొదటి పెయింట్‌కు ఖచ్చితంగా అవసరమైన చాలా చిన్న జావాస్క్రిప్ట్ ముక్కల కోసం (ఉదా., ఒక థీమ్‌ను సెటప్ చేయడం లేదా ఒక క్లిష్టమైన పాలిఫిల్), మీరు వాటిని నేరుగా మీ HTMLలో <head>లోని <script> ట్యాగ్‌లో ఇన్‌లైన్ చేయవచ్చు. ఇది ఒక నెట్‌వర్క్ అభ్యర్థనను ఆదా చేస్తుంది, ఇది అధిక-లేటెన్సీ మొబైల్ కనెక్షన్‌లపై ప్రయోజనకరంగా ఉంటుంది. అయితే, ఇది చాలా తక్కువగా ఉపయోగించాలి. ఇన్‌లైన్ చేయబడిన కోడ్ మీ HTML డాక్యుమెంట్ పరిమాణాన్ని పెంచుతుంది మరియు బ్రౌజర్ ద్వారా విడిగా కాష్ చేయబడదు. ఇది జాగ్రత్తగా పరిగణించవలసిన ఒక ట్రేడ్-ఆఫ్.
అధునాతన టెక్నిక్‌లు మరియు ఆధునిక పద్ధతులు
సర్వర్-సైడ్ రెండరింగ్ (SSR) మరియు స్టాటిక్ సైట్ జనరేషన్ (SSG)
Next.js (React కోసం), Nuxt.js (Vue కోసం), మరియు SvelteKit వంటి ఫ్రేమ్‌వర్క్‌లు SSR మరియు SSGలను ప్రాచుర్యం పొందాయి. ఈ టెక్నిక్‌లు ప్రారంభ రెండరింగ్ పనిని క్లయింట్ యొక్క బ్రౌజర్ నుండి సర్వర్‌కు ఆఫ్‌లోడ్ చేస్తాయి.
- SSR: సర్వర్ అభ్యర్థించిన పేజీ కోసం పూర్తి HTMLను రెండర్ చేసి, దానిని బ్రౌజర్‌కు పంపుతుంది. బ్రౌజర్ ఈ HTMLను వెంటనే ప్రదర్శించగలదు, ఫలితంగా చాలా వేగవంతమైన ఫస్ట్ కంటెంట్‌ఫుల్ పెయింట్ వస్తుంది. జావాస్క్రిప్ట్ అప్పుడు లోడ్ అయి, పేజీని "హైడ్రేట్" చేస్తుంది, దానిని ఇంటరాక్టివ్‌గా చేస్తుంది.
- SSG: ప్రతి పేజీ కోసం HTML బిల్డ్ సమయంలో జనరేట్ చేయబడుతుంది. ఒక యూజర్ ఒక పేజీని అభ్యర్థించినప్పుడు, ఒక స్టాటిక్ HTML ఫైల్ ఒక CDN నుండి తక్షణమే అందించబడుతుంది. కంటెంట్-హెవీ సైట్‌లకు ఇది వేగవంతమైన పద్ధతి.
క్లయింట్-సైడ్ జావాస్క్రిప్ట్ చాలా వరకు ఎక్జిక్యూట్ అవ్వడం ప్రారంభించే ముందే ఒక అర్థవంతమైన ఫస్ట్ పెయింట్‌ను అందించడం ద్వారా SSR మరియు SSG రెండూ CRP పనితీరును నాటకీయంగా మెరుగుపరుస్తాయి.
వెబ్ వర్కర్స్
మీ అప్లికేషన్ భారీ, దీర్ఘకాలిక గణనలను (సంక్లిష్ట డేటా విశ్లేషణ, ఇమేజ్ ప్రాసెసింగ్, లేదా క్రిప్టోగ్రఫీ వంటివి) చేయవలసి వస్తే, దీనిని ప్రధాన థ్రెడ్‌లో చేయడం రెండరింగ్‌ను బ్లాక్ చేస్తుంది మరియు మీ పేజీ స్తంభించినట్లు అనిపించేలా చేస్తుంది. వెబ్ వర్కర్స్ ప్రధాన UI థ్రెడ్ నుండి పూర్తిగా వేరుగా, ఈ స్క్రిప్ట్‌లను ఒక బ్యాక్‌గ్రౌండ్ థ్రెడ్‌లో అమలు చేయడానికి మిమ్మల్ని అనుమతించడం ద్వారా ఒక పరిష్కారాన్ని అందిస్తాయి. ఇది తెర వెనుక భారీ పని జరుగుతున్నప్పుడు మీ అప్లికేషన్‌ను ప్రతిస్పందించేలా ఉంచుతుంది.
CRP ఆప్టిమైజేషన్ కోసం ఒక ఆచరణాత్మక వర్క్‌ఫ్లో
ఇవన్నీ కలిపి మీరు మీ ప్రాజెక్ట్‌లలో వర్తింపజేయగల ఒక ఆచరణాత్మక వర్క్‌ఫ్లోగా చూద్దాం.
- ఆడిట్: ఒక బేస్‌లైన్‌తో ప్రారంభించండి. మీ ప్రస్తుత స్థితిని అర్థం చేసుకోవడానికి మీ ప్రొడక్షన్ బిల్డ్‌పై ఒక లైట్‌హౌస్ నివేదిక మరియు ఒక పనితీరు ప్రొఫైల్‌ను అమలు చేయండి. మీ FCP, LCP, TTIని నోట్ చేసుకోండి, మరియు ఏవైనా లాంగ్ టాస్క్‌లు లేదా రెండర్-బ్లాకింగ్ రిసోర్స్‌లను గుర్తించండి.
- గుర్తించండి: DevTools నెట్‌వర్క్ మరియు పనితీరు ట్యాబ్‌లలోకి లోతుగా వెళ్ళండి. ఏ స్క్రిప్ట్‌లు మరియు స్టైల్‌షీట్‌లు ప్రారంభ రెండర్‌ను బ్లాక్ చేస్తున్నాయో ఖచ్చితంగా గుర్తించండి. ప్రతి రిసోర్స్ కోసం మిమ్మల్ని మీరు ప్రశ్నించుకోండి: "వినియోగదారు ప్రారంభ కంటెంట్‌ను చూడటానికి ఇది ఖచ్చితంగా అవసరమా?"
- ప్రాధాన్యత ఇవ్వండి: మీ ప్రయత్నాలను అబవ్-ద-ఫోల్డ్ కంటెంట్‌ను ప్రభావితం చేసే కోడ్‌పై కేంద్రీకరించండి. ఈ కంటెంట్‌ను వినియోగదారునికి వీలైనంత వేగంగా చేర్చడమే లక్ష్యం. మిగతావన్నీ తర్వాత లోడ్ చేయవచ్చు.
- ఆప్టిమైజ్ చేయండి:
- అన్ని అనవసరమైన స్క్రిప్ట్‌లకు
deferవర్తింపజేయండి. - స్వతంత్ర థర్డ్-పార్టీ స్క్రిప్ట్‌ల కోసం
asyncఉపయోగించండి. - మీ రూట్‌లు మరియు పెద్ద కాంపోనెంట్‌ల కోసం కోడ్ స్ప్లిట్టింగ్‌ను అమలు చేయండి.
- మీ బిల్డ్ ప్రాసెస్‌లో మినిఫికేషన్ మరియు ట్రీ షేకింగ్ ఉన్నాయని నిర్ధారించుకోండి.
- మీ సర్వర్‌లో Brotli లేదా Gzip కంప్రెషన్‌ను ప్రారంభించడానికి మీ ఇన్‌ఫ్రాస్ట్రక్చర్ బృందంతో కలిసి పనిచేయండి.
- CSS కోసం, ప్రారంభ వీక్షణకు అవసరమైన క్రిటికల్ CSSను ఇన్‌లైన్ చేయడం మరియు మిగిలిన వాటిని లేజీ-లోడ్ చేయడం పరిగణించండి.
- అన్ని అనవసరమైన స్క్రిప్ట్‌లకు
- కొలవండి: మార్పులను అమలు చేసిన తర్వాత, మళ్లీ ఆడిట్ అమలు చేయండి. మీ కొత్త స్కోర్‌లు మరియు సమయాలను బేస్‌లైన్‌తో పోల్చండి. మీ FCP మెరుగుపడిందా? తక్కువ రెండర్-బ్లాకింగ్ రిసోర్స్‌లు ఉన్నాయా?
- పునరావృతం చేయండి: వెబ్ పనితీరు ఒక-సారి పరిష్కారం కాదు; ఇది ఒక నిరంతర ప్రక్రియ. మీ అప్లికేషన్ పెరిగేకొద్దీ, కొత్త పనితీరు అడ్డంకులు తలెత్తవచ్చు. మీ డెవలప్‌మెంట్ మరియు డిప్లాయ్‌మెంట్ సైకిల్‌లో పనితీరు ఆడిటింగ్‌ను ఒక సాధారణ భాగంగా చేసుకోండి.
ముగింపు: పనితీరు మార్గాన్ని అధిగమించడం
క్రిటికల్ రెండరింగ్ పాత్ అనేది మీ అప్లికేషన్‌కు జీవం పోయడానికి బ్రౌజర్ అనుసరించే బ్లూప్రింట్. డెవలపర్‌లుగా, ఈ పాత్‌పై మన అవగాహన మరియు నియంత్రణ, ముఖ్యంగా జావాస్క్రిప్ట్‌కు సంబంధించి, యూజర్ అనుభవాన్ని మెరుగుపరచడానికి మనకు ఉన్న అత్యంత శక్తివంతమైన సాధనాల్లో ఒకటి. కేవలం పనిచేసే కోడ్ వ్రాయడం నుండి పనితీరు కనబరిచే కోడ్ వ్రాయడం అనే మనస్తత్వానికి మారడం ద్వారా, మనం ప్రపంచవ్యాప్తంగా ఉన్న వినియోగదారుల కోసం కేవలం ఫంక్షనల్ మాత్రమే కాకుండా, వేగవంతమైన, అందుబాటులో ఉండే, మరియు ఆనందదాయకమైన అప్లికేషన్‌లను నిర్మించగలము.
ఈ ప్రయాణం విశ్లేషణతో ప్రారంభమవుతుంది. మీ డెవలపర్ టూల్స్ తెరవండి, మీ అప్లికేషన్‌ను ప్రొఫైల్ చేయండి, మరియు మీ యూజర్ మరియు పూర్తిగా రెండర్ చేయబడిన పేజీ మధ్య నిలబడే ప్రతి రిసోర్స్‌ను ప్రశ్నించడం ప్రారంభించండి. స్క్రిప్ట్‌లను వాయిదా వేయడం, కోడ్‌ను విభజించడం, మరియు మీ పేలోడ్‌ను తగ్గించడం వంటి వ్యూహాలను వర్తింపజేయడం ద్వారా, మీరు బ్రౌజర్ దాని ఉత్తమ పనిని చేయడానికి మార్గాన్ని సుగమం చేయవచ్చు: కంటెంట్‌ను మెరుపు వేగంతో రెండర్ చేయడం.